<template>
  <div class="my-music-container">
    <!-- 左侧导航栏 -->
    <div class="sidebar">
      <div class="logo">
        <h1>我的音乐</h1>
      </div>

      <div class="nav-section">
        <h2>我的音乐</h2>
        <el-menu
          default-active="1"
          class="menu"
          mode="vertical"
          @select="handleMenuSelect"
        >
          <!-- 我的歌单菜单项（可展开） -->
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Folder /></el-icon>
              <span>我的歌单</span>
            </template>

            <!-- 用户创建的歌单列表 -->
            <el-menu-item
              v-for="playlist in createdPlaylists"
              :key="playlist.playlist_id"
              :index="`playlist-${playlist.playlist_id}`"
              @click="goToPlaylistDetail(playlist.playlist_id)"
            >
              <div class="playlist-menu-item">
                <img
                  :src="playlist.cover_url"
                  alt="歌单封面"
                  class="playlist-cover-small"
                />
                <span class="playlist-name">{{ playlist.playlist_name }}</span>
              </div>
            </el-menu-item>

            <!-- 创建新歌单按钮 -->
            <el-menu-item
              index="create-playlist"
              @click="showCreatePlaylistDialog"
            >
              <el-icon><Plus /></el-icon>
              <span>创建新歌单</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 我的喜欢菜单项 -->
          <el-menu-item index="2">
            <el-icon><Star /></el-icon>
            <span>我的喜欢</span>
          </el-menu-item>
        </el-menu>
      </div>

      <div class="nav-section">
        <h2>收藏的专辑</h2>
        <div v-if="favoriteAlbums.length === 0" class="empty-state">
          <p>你还没有收藏专辑!</p>
          <el-button type="primary" @click="goToDiscoverAlbums"
            >发现专辑</el-button
          >
        </div>
        <ul v-else class="album-list">
          <li
            v-for="album in favoriteAlbums"
            :key="album.album_id"
            class="album-item"
            @click="goToAlbumDetail(album.album_id)"
          >
            <img :src="album.cover_url" alt="专辑封面" class="album-cover" />
            <div class="album-info">
              <div class="album-name">{{ album.album_name }}</div>
              <div class="album-artist">{{ album.artist_name }}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 右侧主内容区 -->
    <div class="main-content">
      <!-- 根据当前选中的菜单项显示不同内容 -->
      <template v-if="activeMenu === '2'">
        <!-- 我的喜欢页面 -->
        <div class="header">
          <h1>我喜欢的音乐</h1>
          <div class="action-buttons">
            <el-button type="primary" @click="togglePlayAll">
              <el-icon><VideoPlay /></el-icon> 播放全部
            </el-button>
            <el-button @click="showCreatePlaylistDialog">
              <el-icon><Plus /></el-icon> 新建歌单
            </el-button>
          </div>
        </div>

        <div v-if="favoriteSongs.length === 0" class="empty-state">
          <div class="empty-icon">
            <el-icon class="icon"><Star /></el-icon>
          </div>
          <p>你还没有收藏任何歌曲</p>
          <p>
            去
            <el-link type="primary" @click="goToDiscoverMusic"
              >发现音乐</el-link
            >
            收藏喜欢的歌曲吧
          </p>
        </div>

        <div v-else class="song-list-container">
          <div class="song-list-header">
            <div class="column">歌曲</div>
            <div class="column">时长</div>
            <div class="column">歌手</div>
            <!-- <div class="column">专辑</div> -->
            <div class="column action-column">操作</div>
          </div>

          <el-table
            :data="favoriteSongs"
            stripe
            style="width: 100%; margin-top: 20px"
            v-loading="isLoading"
          >
            <el-table-column label="#" width="50">
              <template #default="scope">
                <div>{{ scope.$index + 1 }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="song_name" label="歌曲" width="300">
              <template #default="scope">
                <div class="song-title">
                  <span>{{ scope.row.song_name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="时长" width="80">
              <template #default="scope">
                {{ formatDuration(scope.row.duration) }}
              </template>
            </el-table-column>
            <el-table-column prop="artist_name" label="歌手" width="180" />
            <!-- <el-table-column prop="album_name" label="专辑" width="200" /> -->
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <div class="song-actions-row">
                  <el-button
                    size="small"
                    type="primary"
                    icon="VideoPlay"
                    circle
                    @click="playSong(scope.row)"
                  />
                  <el-button
                    size="small"
                    type="success"
                    icon="Plus"
                    circle
                    @click="addToPlaylist(scope.row)"
                  />
                  <el-button
                    size="small"
                    type="warning"
                    icon="Star"
                    circle
                    @click="likeSong(scope.row)"
                  />
                  <el-button
                    size="small"
                    type="info"
                    icon="Share"
                    circle
                    @click="shareSong(scope.row)"
                  />
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>

      <template v-else-if="activeMenu.startsWith('playlist-')">
        <!-- 歌单详情页面 -->
        <div class="playlist-detail">
          <div class="playlist-header">
            <div class="playlist-cover">
              <img :src="currentPlaylist.cover_url" alt="歌单封面" />
            </div>
            <div class="playlist-info">
              <h1>{{ currentPlaylist.playlist_name }}</h1>
              <div class="meta">
                <div class="creator">
                  <el-avatar :size="32" :src="currentPlaylist.creator_avatar" />
                  <span>{{ currentPlaylist.creator_name }}</span>
                </div>
                <div class="stats">
                  <span
                    >创建于: {{ formatDate(currentPlaylist.create_time) }}</span
                  >
                  <span>{{ currentPlaylist.song_count }} 首歌曲</span>
                </div>
              </div>
              <div class="actions">
                <el-button type="primary" @click="playPlaylist">
                  <el-icon><VideoPlay /></el-icon> 播放全部
                </el-button>
                <el-button>
                  <el-icon><Star /></el-icon> 收藏
                </el-button>
                <el-button>
                  <el-icon><Share /></el-icon> 分享
                </el-button>
              </div>
            </div>
          </div>

          <div class="song-list-container">
            <div class="song-list-header">
              <div class="column">歌曲</div>
              <div class="column">时长</div>
              <div class="column">歌手</div>
              <div class="column">专辑</div>
              <div class="column action-column">操作</div>
            </div>

            <el-table
              :data="currentPlaylist.songs"
              stripe
              style="width: 100%; margin-top: 20px"
              v-loading="isLoading"
            >
              <el-table-column label="#" width="50">
                <template #default="scope">
                  <div>{{ scope.$index + 1 }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="song_name" label="歌曲" width="300">
                <template #default="scope">
                  <div class="song-title">
                    <el-icon @click="playSong(scope.row)"
                      ><VideoPlay
                    /></el-icon>
                    <span>{{ scope.row.song_name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="时长" width="80">
                <template #default="scope">
                  {{ formatDuration(scope.row.duration) }}
                </template>
              </el-table-column>
              <el-table-column prop="artist_name" label="歌手" width="180" />
              <el-table-column prop="album_name" label="专辑" width="200" />
              <el-table-column label="操作" width="120">
                <template #default="scope">
                  <div class="song-actions-row">
                    <el-button
                      size="small"
                      type="primary"
                      icon="VideoPlay"
                      circle
                      @click="playSong(scope.row)"
                    />
                    <el-button
                      size="small"
                      type="success"
                      icon="Plus"
                      circle
                      @click="addToPlaylist(scope.row)"
                    />
                    <el-button
                      size="small"
                      type="warning"
                      icon="Star"
                      circle
                      @click="likeSong(scope.row)"
                    />
                    <el-button
                      size="small"
                      type="info"
                      icon="Share"
                      circle
                      @click="shareSong(scope.row)"
                    />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </template>

      <template v-else-if="activeMenu === 'album-detail' && selectedAlbum">
        <!-- 专辑详情页面 -->
        <div class="album-detail">
          <div class="header">
            <h1>专辑详情</h1>
            <div class="action-buttons">
              <el-button
                type="primary"
                @click="playAllAlbumSongs"
                v-if="selectedAlbum.songs && selectedAlbum.songs.length > 0"
              >
                <el-icon><VideoPlay /></el-icon> 播放全部
              </el-button>
              <el-button type="warning" @click="collectAlbum">
                <el-icon><Star /></el-icon> 收藏专辑
              </el-button>
              <el-button type="info" @click="shareAlbum">
                <el-icon><Share /></el-icon> 分享专辑
              </el-button>
            </div>
          </div>

          <div class="album-header">
            <img
              :src="selectedAlbum.cover_url"
              alt="专辑封面"
              class="album-detail-cover"
            />
            <div class="album-detail-info">
              <h2 class="album-title">{{ selectedAlbum.album_name }}</h2>
              <div class="album-artist">
                歌手：
                <el-link
                  type="primary"
                  :underline="false"
                  @click="viewArtist(selectedAlbum.artist_id)"
                >
                  {{ selectedAlbum.artist_name }}
                </el-link>
              </div>
              <div class="album-meta">
                <div class="meta-item" v-if="selectedAlbum.releaseDate">
                  <i class="el-icon-calendar"></i>
                  <span>发行日期：{{ selectedAlbum.releaseDate }}</span>
                </div>
                <div class="meta-item">
                  <i class="el-icon-music"></i>
                  <span
                    >歌曲数：{{
                      selectedAlbum.song_count ||
                      selectedAlbum.songs?.length ||
                      "未知"
                    }}</span
                  >
                </div>
              </div>
              <div class="album-description" v-if="selectedAlbum.description">
                <h3>专辑介绍</h3>
                <p>{{ selectedAlbum.description }}</p>
              </div>
            </div>
          </div>

          <!-- 歌曲列表 -->
          <div class="songs-section">
            <div class="section-header">
              <h3>专辑曲目 ({{ selectedAlbum.songs?.length || 0 }})</h3>
            </div>

            <el-table
              :data="selectedAlbum.songs || []"
              stripe
              class="songs-table"
              v-loading="albumSongsLoading"
            >
              <el-table-column width="50" align="center">
                <template #default="{ $index }">
                  <span class="song-index">{{ $index + 1 }}</span>
                </template>
              </el-table-column>

              <el-table-column prop="song_name" label="歌曲标题">
                <template #default="{ row }">
                  <span class="song-title" @click="playSong(row)">{{
                    row.song_name
                  }}</span>
                </template>
              </el-table-column>

              <el-table-column label="歌手" width="180">
                <template #default="{ row }">
                  <span>{{
                    row.artist_name || selectedAlbum.artist_name
                  }}</span>
                </template>
              </el-table-column>

              <el-table-column label="时长" width="100" align="right">
                <template #default="{ row }">
                  <span class="song-duration">{{
                    formatDuration(row.duration)
                  }}</span>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="180" align="center">
                <template #default="{ row }">
                  <div class="song-actions-row">
                    <el-button
                      type="primary"
                      size="small"
                      icon="VideoPlay"
                      circle
                      @click="playSong(row)"
                    />
                    <el-button
                      type="success"
                      size="small"
                      icon="Plus"
                      circle
                      @click="addToPlaylist(row)"
                    />
                    <el-button
                      type="warning"
                      size="small"
                      icon="Star"
                      circle
                      @click="likeSong(row)"
                    />
                    <el-button
                      type="info"
                      size="small"
                      icon="Share"
                      circle
                      @click="shareSong(row)"
                    />
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- 无歌曲数据状态 -->
            <div
              v-if="!selectedAlbum.songs || selectedAlbum.songs.length === 0"
              class="no-songs-data"
            >
              <el-empty description="暂无歌曲数据" v-if="!albumSongsLoading" />
            </div>
          </div>
        </div>
      </template>
    </div>

    <!-- 创建歌单对话框 -->
    <el-dialog v-model="createDialogVisible" title="新建歌单" width="400px">
      <el-form :model="newPlaylistForm" label-width="80px">
        <el-form-item label="歌单名称" required>
          <el-input
            v-model="newPlaylistForm.playlist_name"
            placeholder="输入歌单名称"
          />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="newPlaylistForm.description"
            type="textarea"
            placeholder="输入歌单描述（可选）"
            rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createPlaylist">创建</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  Delete,
  Folder,
  Plus,
  Share,
  Star,
  StarFilled,
  VideoPlay,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import api from "../services/api";

export default {
  name: "MyMusic",
  setup() {
    const router = useRouter();

    // 状态数据
    const favoriteSongs = ref([]);
    const selectedAlbum = ref(null); // 添加 selectedAlbum 状态

    const createdPlaylists = ref([
      {
        playlist_id: 1,
        playlist_name: "周杰伦精品歌曲大全",
        cover_url: "https://picsum.photos/300/300?random=10",
        song_count: 3,
        creator_name: "我的账号",
        creator_avatar: "https://picsum.photos/100/100?random=30",
        create_time: "2023-06-15T12:00:00",
        songs: [
          {
            song_id: 4,
            song_name: "七里香",
            duration: 299,
            artist_name: "周杰伦",
            album_name: "七里香",
            cover_url: "https://picsum.photos/200/200?random=4",
          },
          {
            song_id: 5,
            song_name: "晴天",
            duration: 269,
            artist_name: "周杰伦",
            album_name: "叶惠美",
            cover_url: "https://picsum.photos/200/200?random=5",
          },
          {
            song_id: 6,
            song_name: "告白气球",
            duration: 215,
            artist_name: "周杰伦",
            album_name: "周杰伦的床边故事",
            cover_url: "https://picsum.photos/200/200?random=6",
          },
        ],
      },
      {
        playlist_id: 2,
        playlist_name: "【华语R&B】那些微妙的节奏",
        cover_url: "https://picsum.photos/300/300?random=11",
        song_count: 8,
        creator_name: "我的账号",
        creator_avatar: "https://picsum.photos/100/100?random=31",
        create_time: "2023-05-20T14:30:00",
        songs: [
          {
            song_id: 7,
            song_name: "红色高跟鞋",
            duration: 206,
            artist_name: "蔡健雅",
            album_name: "若你碰到他",
            cover_url: "https://picsum.photos/200/200?random=7",
          },
          {
            song_id: 8,
            song_name: "爱爱爱",
            duration: 250,
            artist_name: "方大同",
            album_name: "爱爱爱",
            cover_url: "https://picsum.photos/200/200?random=8",
          },
        ],
      },
    ]);

    // 收藏专辑列表
    const favoriteAlbums = ref([]);

    const isLoading = ref(false);
    const activeMenu = ref("2"); // 默认选中"我的喜欢"
    const createDialogVisible = ref(false);
    const newPlaylistForm = reactive({
      playlist_name: "",
      description: "",
    });

    // 计算当前选中的歌单
    const currentPlaylist = computed(() => {
      if (activeMenu.value.startsWith("playlist-")) {
        const playlistId = parseInt(activeMenu.value.split("-")[1]);
        return (
          createdPlaylists.value.find((p) => p.playlist_id === playlistId) || {}
        );
      }
      return {};
    });

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return "";
      const date = new Date(dateString);
      return date.toLocaleDateString();
    };

    // 字符串时长转秒数
    const parseDuration = (duration) => {
      if (typeof duration === "number") return duration;
      if (typeof duration === "string" && duration.includes(":")) {
        const [min, sec] = duration.split(":").map(Number);
        return min * 60 + sec;
      }
      return 0;
    };

    // 格式化时长（秒数转mm:ss）
    const formatDuration = (seconds) => {
      if (!seconds || isNaN(seconds)) return "00:00";
      const mins = Math.floor(seconds / 60);
      const secs = Math.round(seconds % 60);
      return `${mins.toString().padStart(2, "0")}:${secs
        .toString()
        .padStart(2, "0")}`;
    };

    // 生命周期钩子，获取用户收藏列表
    onMounted(async () => {
      isLoading.value = true;
      try {
        // 收藏歌曲
        const userId = 1;
        const page = 1;
        const size = 50;
        // 收藏音乐 type=1
        const resSongs = await api.httpClient.get("/collections", {
          page,
          size,
          type: 1,
          userId,
        });
        if (resSongs && resSongs.data && Array.isArray(resSongs.data.records)) {
          favoriteSongs.value = resSongs.data.records.map((item) => ({
            song_id: item.targetId,
            song_name: item.targetName,
            duration: parseDuration(item.duration),
            artist_name: item.artistName,
            cover_url: item.targetCoverUrl,
          }));
        } else {
          favoriteSongs.value = [];
        }

        // 收藏专辑 type=2
        const resAlbums = await api.httpClient.get("/collections", {
          page,
          size,
          type: 2,
          userId,
        });
        if (
          resAlbums &&
          resAlbums.data &&
          Array.isArray(resAlbums.data.records)
        ) {
          favoriteAlbums.value = resAlbums.data.records.map((item) => ({
            album_id: item.targetId,
            album_name: item.targetName,
         
            cover_url: item.targetCoverUrl,
            description: item.targetDescription,
            song_count: item.songCount,
          }));
        } else {
          favoriteAlbums.value = [];
        }
      } catch (e) {
        ElMessage.error("获取收藏列表失败");
        console.error("获取收藏列表失败:", e);
        favoriteSongs.value = [];
        favoriteAlbums.value = [];
      }
      isLoading.value = false;
    });

    // 菜单选择处理
    const handleMenuSelect = (key) => {
      activeMenu.value = key;
    };

    // 播放歌曲
    const playSong = (song) => {
      ElMessage.success(`播放: ${song.song_name}`);
    };

    // 播放整个歌单
    const playPlaylist = () => {
      console.log("播放歌单:", currentPlaylist.value.playlist_name);
    };

    // 播放全部歌曲
    const togglePlayAll = () => {
      if (favoriteSongs.value.length > 0) {
        console.log("播放全部", favoriteSongs.value.length, "首歌曲");
      }
    };

    // 添加到歌单
    const addToPlaylist = (song) => {
      console.log("添加到歌单:", song.song_name);
    };

    // 从歌单中移除
    const removeFromPlaylist = (song, playlistId) => {
      console.log("从歌单中移除:", song.song_name);
      const playlist = createdPlaylists.value.find(
        (p) => p.playlist_id === playlistId
      );
      if (playlist) {
        playlist.songs = playlist.songs.filter(
          (s) => s.song_id !== song.song_id
        );
        playlist.song_count = playlist.songs.length;
      }
    };

    // 从收藏中移除
    const removeFromFavorite = (song) => {
      console.log("从收藏中移除:", song.song_name);
      favoriteSongs.value = favoriteSongs.value.filter(
        (item) => item.song_id !== song.song_id
      );
    };

    // 新建歌单
    const createPlaylist = () => {
      if (!newPlaylistForm.playlist_name.trim()) {
        return;
      }

      const newPlaylist = {
        playlist_id: Date.now(),
        playlist_name: newPlaylistForm.playlist_name,
        description: newPlaylistForm.description,
        cover_url: "https://picsum.photos/300/300?random=" + Date.now(),
        song_count: 0,
        creator_name: "我的账号",
        creator_avatar: "https://picsum.photos/100/100?random=50",
        create_time: new Date().toISOString(),
        songs: [],
      };

      createdPlaylists.value.unshift(newPlaylist);
      createDialogVisible.value = false;

      // 重置表单
      newPlaylistForm.playlist_name = "";
      newPlaylistForm.description = "";
    };

    // 显示新建歌单对话框
    const showCreatePlaylistDialog = () => {
      createDialogVisible.value = true;
    };

    // 前往歌单详情
    const goToPlaylistDetail = (id) => {
      activeMenu.value = `playlist-${id}`;
    };

    // 前往专辑详情
    const albumSongsLoading = ref(false);
    const goToAlbumDetail = async (id) => {
      const album = favoriteAlbums.value.find((a) => a.album_id === id);
      if (album) {
        selectedAlbum.value = album;
        activeMenu.value = "album-detail";
        albumSongsLoading.value = true;
        try {
          // 获取专辑详情
          const res = await api.albumApi.getAlbumDetail(id);
          if (res && res.code === 200 && res.data) {
            selectedAlbum.value = {
              ...selectedAlbum.value,
              releaseDate: res.data.releaseDate,
              description:
                res.data.description || selectedAlbum.value.description,
              song_count: res.data.trackCount || selectedAlbum.value.song_count,
              artist_name:
                res.data.artistName || selectedAlbum.value.artist_name,
              artist_id: res.data.artistId || selectedAlbum.value.artist_id,
            };
          }
          // 获取专辑内的歌曲
          const songsRes = await api.albumApi.getAlbumSongs(id);
          if (
            songsRes &&
            songsRes.code === 200 &&
            Array.isArray(songsRes.data)
          ) {
            selectedAlbum.value.songs = songsRes.data.map((song) => ({
              song_id: song.songId,
              song_name: song.songName,
              duration: song.duration,
              artist_name: selectedAlbum.value.artist_name,
              artist_id: selectedAlbum.value.artist_id,
              fileUrl: song.fileUrl,
              coverUrl: song.coverUrl || selectedAlbum.value.cover_url,
            }));
          } else {
            selectedAlbum.value.songs = [];
            console.warn("获取专辑歌曲失败或数据为空");
          }
        } catch (error) {
          console.error("获取专辑详情或歌曲失败:", error);
          ElMessage.error("获取专辑信息失败");
          selectedAlbum.value.songs = [];
        } finally {
          albumSongsLoading.value = false;
        }
      }
    };

    // 前往发现专辑
    const goToDiscoverAlbums = () => {
      router.push("/discover/albums");
    };

    // 前往发现音乐
    const goToDiscoverMusic = () => {
      router.push("/discover/music");
    };

    // 收藏歌曲
    const likeSong = (song) => {
      ElMessage.success(`已收藏: ${song.song_name}`);
    };

    // 分享歌曲
    const shareSong = (song) => {
      ElMessageBox.confirm(`分享歌曲 "${song.song_name}" 给好友?`, "分享歌曲", {
        confirmButtonText: "复制链接",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        navigator.clipboard.writeText(
          `https://musicplatform.com/song/${song.song_id}`
        );
        ElMessage.success("歌曲链接已复制到剪贴板");
      });
    };

    // 播放专辑内所有歌曲
    const playAllAlbumSongs = () => {
      if (
        selectedAlbum.value &&
        selectedAlbum.value.songs &&
        selectedAlbum.value.songs.length > 0
      ) {
        ElMessage.success(
          `开始播放专辑: ${selectedAlbum.value.album_name} 的所有歌曲`
        );
      }
    };

    // 收藏专辑
    const collectAlbum = () => {
      if (selectedAlbum.value) {
        ElMessage.success(`已收藏专辑: ${selectedAlbum.value.album_name}`);
      }
    };

    // 分享专辑
    const shareAlbum = () => {
      if (selectedAlbum.value) {
        ElMessageBox.confirm(
          `分享专辑 "${selectedAlbum.value.album_name}" 给好友?`,
          "分享专辑",
          {
            confirmButtonText: "复制链接",
            cancelButtonText: "取消",
            type: "info",
          }
        ).then(() => {
          navigator.clipboard.writeText(
            `https://musicplatform.com/album/${selectedAlbum.value.album_id}`
          );
          ElMessage.success("专辑链接已复制到剪贴板");
        });
      }
    };

    // 查看歌手详情
    const viewArtist = (artistId) => {
      if (artistId) {
        ElMessage.info(`查看歌手详情: ${artistId}`);
        // 可跳转到歌手详情页 router.push(`/artist/${artistId}`)
      }
    };

    return {
      favoriteSongs,
      createdPlaylists,
      favoriteAlbums,
      isLoading,
      activeMenu,
      createDialogVisible,
      newPlaylistForm,
      currentPlaylist,
      selectedAlbum,
      albumSongsLoading,
      handleMenuSelect,
      playSong,
      playPlaylist,
      togglePlayAll,
      addToPlaylist,
      removeFromPlaylist,
      removeFromFavorite,
      createPlaylist,
      showCreatePlaylistDialog,
      goToPlaylistDetail,
      goToAlbumDetail,
      goToDiscoverAlbums,
      goToDiscoverMusic,
      formatDate,
      formatDuration,
      Folder,
      Star,
      VideoPlay,
      Plus,
      StarFilled,
      Share,
      Delete,
      likeSong,
      shareSong,
      playAllAlbumSongs,
      collectAlbum,
      shareAlbum,
      viewArtist,
    };
  },
};
</script>

<style scoped>
/* 整体布局 */
.my-music-container {
  display: flex;
  min-height: 100vh;
  background: #f5f7fa;
}

.sidebar {
  width: 260px;
  background: #282c34;
  color: #fff;
  padding: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.logo {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #333;
}

.logo h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.nav-section {
  margin-bottom: 30px;
}

.nav-section h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 15px;
  padding: 0 10px;
  color: #b3b3b3;
  text-transform: uppercase;
}

/* 菜单样式 */
.menu {
  border-right: none;
  background: transparent;
}

.menu :deep(.el-sub-menu__title),
.menu :deep(.el-menu-item) {
  color: #fff;
  border-radius: 4px;
  margin-bottom: 5px;
  padding: 0 10px;
  height: 40px;
  display: flex;
  align-items: center;
}

.menu :deep(.el-sub-menu__title):hover,
.menu :deep(.el-menu-item):hover,
.menu :deep(.el-menu-item.is-active) {
  background: rgba(255, 255, 255, 0.1);
  color: #409eff;
}

.menu :deep(.el-icon) {
  margin-right: 10px;
  font-size: 18px;
}

/* 歌单菜单项 */
.playlist-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
}

.playlist-cover-small {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  margin-right: 10px;
  object-fit: cover;
}

.playlist-name {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 20px 0;
  color: #999;
}

.empty-state p {
  margin-bottom: 15px;
}

/* 专辑列表样式 */
.album-list {
  padding: 0;
}

.album-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
}

.album-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.album-cover {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 4px;
  object-fit: cover;
}

.album-info {
  flex: 1;
  overflow: hidden;
}

.album-name {
  font-size: 14px;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-artist {
  font-size: 12px;
  color: #999;
}

/* 专辑详情样式 */
.album-detail {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.album-detail .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
}

.album-detail .header h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.album-header {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.album-detail-cover {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  object-fit: cover;
}

.album-detail-info {
  flex: 1;
}

.album-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 15px;
}

.album-artist {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

.album-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 15px;
}

.album-description {
  margin-top: 20px;
}

.album-description h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.album-description p {
  line-height: 1.7;
  color: #555;
  text-align: justify;
}

.songs-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.songs-table {
  width: 100%;
}

.song-index {
  color: #7f8c8d;
  font-size: 16px;
}

.song-title {
  font-weight: 500;
  color: #2c3e50;
  cursor: pointer;
  transition: color 0.2s;
}

.song-title:hover {
  color: #409eff;
}

.song-duration {
  color: #7f8c8d;
}

.song-actions-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.no-songs-data {
  padding: 30px 0;
  text-align: center;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.empty-state.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  text-align: center;
}

.empty-icon {
  font-size: 60px;
  color: #999;
  margin-bottom: 20px;
}

.empty-state p {
  margin-bottom: 10px;
  color: #666;
}

/* 歌单详情页 */
.playlist-detail {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.playlist-header {
  display: flex;
  margin-bottom: 30px;
}

.playlist-cover {
  width: 200px;
  height: 200px;
  margin-right: 30px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.playlist-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.playlist-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.playlist-info h1 {
  font-size: 28px;
  margin: 0 0 15px;
}

.meta {
  margin-bottom: 20px;
}

.creator {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.creator .el-avatar {
  margin-right: 10px;
}

.stats {
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: #666;
}

.actions {
  display: flex;
  gap: 10px;
}

/* 歌曲列表 */
.song-list-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.song-list-header {
  display: flex;
  padding: 10px 20px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  background: #f9f9f9;
}

.column {
  padding: 10px 0;
  flex: 1;
}

.action-column {
  flex: 0 0 120px;
  text-align: center;
}

.song-title {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.song-title .el-icon {
  margin-right: 10px;
  font-size: 16px;
  color: #999;
  transition: color 0.3s;
}

.song-title:hover .el-icon {
  color: #409eff;
}

/* 专辑详情样式 */
.album-detail {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.album-header {
  display: flex;
  align-items: center;
}
.album-detail-cover {
  width: 180px;
  height: 180px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.album-detail-info {
  flex: 1;
}
.album-detail-info h1 {
  font-size: 28px;
  margin-bottom: 10px;
}
.album-artist {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}
.album-meta {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}
.album-description {
  font-size: 14px;
  color: #333;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .sidebar {
    width: 220px;
    padding: 15px;
  }

  .main-content {
    padding: 20px;
  }
}

@media (max-width: 768px) {
  .my-music-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    top: 0;
    flex-shrink: 0;
  }

  .main-content {
    padding: 15px;
  }

  .playlist-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .playlist-cover {
    margin-right: 0;
    margin-bottom: 20px;
  }

  .creator,
  .stats {
    justify-content: center;
  }

  .actions {
    justify-content: center;
  }
}
</style>
